import {
  createRouter,
  createWebHashHistory,
  type RouteRecordRaw,
} from "vue-router";
import { start, close } from "@/utils/nprogress";
import { useTokenStore } from "@/store";
const routes: RouteRecordRaw[] = [
  {
    path: "/",
    component: () => import("../views/index/home/PicxHome.vue"),
    redirect: { name: "Container" },
    meta: {
      title: "主页",
      requireLog: true,
      transition: "slide-left",
    },
    children: [
      {
        path: "container",
        name: "Container",
        component: () => import("../views/index/home/PicxContainer.vue"),
        meta: {
          title: "主页",
          transition: "slide-right",
        },
      },
      {
        path: "detail/:id(\\d+)",
        name: "Detail",
        component: () => import("../views/index/detail/PicxDetail.vue"),
        meta: {
          title: "详情页",
          requireLog: true,
          transition: "slide-left",
        },
      },
      {
        path: "/user",
        name: "User",
        component: () => import("../views/index/user/UserHome.vue"),
        redirect: () => ({ name: "UserEdit" }),
        meta: {
          title: "用户中心",
          requireLog: true,
        },
        children: [
          {
            path: "edit",
            name: "UserEdit",
            component: () => import("../views/index/user/UserEdit.vue"),
          },
          {
            path: "follow",
            name: "UserFollow",
            component: () => import("../views/index/user/UserFollow.vue"),
          },
        ],
      },
      {
        path: "/category",
        name: "PicxCategory",
        component: () => import("../views/index/category/PicxCategory.vue"),
        redirect: {
          path: "/category/main",
        },
        children: [
          {
            path: "main",
            component: () => import("../views/index/category/CategoryMain.vue"),
          },
        ],
      },
    ],
  },
  {
    path: "/login",
    name: "UserLogin",
    component: () => import("../views/index/user/UserLogin.vue"),
  },
  {
    path: "/registry",
    name: "UserRegistry",
    component: () => import("../views/index/user/UserRegistry.vue"),
  },
  {
    path: "/chat",
    name: "ChatRoom",
    component: () => import("../views/index/room/ChatRoom.vue"),
  },
  {
    path: "/admin",
    name: "AdminHome",
    component: () => import("../views/admin/AdminHome.vue"),
    redirect: {
      path: "/admin/pic",
    },
    children: [
      {
        path: "pic",
        component: () => import("../views/admin/AdminPic.vue"),
      },
      {
        path: "upload",
        component: () => import("../views/admin/AdminUpload.vue"),
      },
      {
        path: "category",
        component: () => import("../views/admin/AdminCategory.vue"),
      },
      {
        path: "subscriber",
        component: () => import("../views/admin/AdminSubscriber.vue"),
      },
      {
        path: "statistics",
        component: () => import("../views/admin/AdminStatistics.vue"),
      },
      {
        path: "system",
        component: () => import("../views/admin/AdminSystem.vue"),
      },
    ],
  },
  {
    path: "/:pathMatch(.*)*",
    name: "NotFound",
    component: () => import("@/components/NotFind/NotFind.vue"),
  },
];
const router = createRouter({
  routes,
  history: createWebHashHistory(),
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return {
        top: 0,
        left: 0,
      };
    }
  },
});
router.beforeEach((to, from, next) => {
  start();
  const store = useTokenStore();
  if (!to.meta.requireLog) {
    next();
  } else {
    if (store.token) {
      next();
    } else {
      next({
        name: "UserLogin",
      });
    }
  }
});
router.afterEach((to, from) => {
  close();
});
export default router;
